.category-box {
  position: relative;
  margin-bottom: 32px;

  .category-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 25px;
    column-gap: 33px;
    min-height: 174px;

    .item {
      display: flex;
      flex-direction: column;
      cursor: pointer;

      .item-cover {
        width: 70px;
        height: 70px;
        background: url('@/assets/image/home-djprogram/border.png') no-repeat;
        background-position: 0 9999px;
        color: #888;
        text-align: center;

        &:hover {
          background-position: 0 0;
        }

        .icon {
          display: inline-block;
          vertical-align: middle;
          width: 48px;
          height: 48px;
          margin: 2px auto 0;
          background-position: 0 0;
        }

        .problem {
          background: url('@/assets/image/home-djprogram/problem.png') no-repeat;
        }

        .anchor {
          background: url('@/assets/image/home-djprogram/anchor.png') no-repeat;
        }

        .text {
          display: inline-block;
          vertical-align: middle;
          font-size: 12px;
          color: #888;
          cursor: pointer;
        }

        .anchor-text {
          color: #5ab5e7;
        }
      }
    }

    .active-item {
      .item-cover {
        background-position: -70px 0;

        &:hover {
          background-position: -70px 0;
        }

        .icon {
          background-position: -48px 0;
        }

        .text {
          color: #d35757;
        }
      }
    }
  }

  .btn {
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 20px;
    height: 30px;
    margin-top: -15px;
    text-indent: -9999px;
    cursor: pointer;
    background: url('@/assets/image/home-djprogram/botton.png') no-repeat;
    opacity: .25;

    &:hover {
      opacity: .4;
    }
  }

  .prev-btn {
    left: -26px;
    background-position: 0 -30px;
  }

  .next-btn {
    right: -26px;
    background-position: -30px -30px;
  }

  .disable-btn,
  .disable-btn:hover {
    opacity: .08;
  }

  .dotpage {
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    line-height: 0;
    text-align: center;

    .dot {
      display: inline-block;
      width: 20px;
      height: 20px;
      text-indent: -9999px;
      cursor: pointer;
      background: url('@/assets/image/home-djprogram/botton.png') no-repeat;
      background-position: 0 0;
    }

    .active-dot {
      background-position: -30px 0;
    }
  }
}
